;(function(Vue){
    Vue.component("home",{
        template:`<h1>主页组件</h1>`
    });
    Vue.component("product",{
        template:`<h1>产品详情组件</h1>`
    });
    Vue.component("profile",{
        template:`<h1>公司介绍组件</h1>`
    });
    let routes=[
        {
            path:"/home",
            component:"home"
        },
        {
            path:"/product",
            component:"product"
        },
        {
            path:"/profile",
            component:"profile"
        }
    ];
    // 添加了一个hash change的监听事件
    window.addEventListener("hashchange",function(e){
        // console.log(e);
        console.log(window.location.hash);
        let path=window.location.hash.split("#")[1];// 拿到pash值
        // 路由对应的配置项
        let route_item= routes.find(v=>{
            if(v.path===path){
                return true;
            }
        })
        console.log( route_item);
        console.log(vm.componentId);
        vm.componentId=route_item.component;
    })
})(Vue)